<template>
  <div class="home">
    <header>
      <div class="Logo">
        <span>直播电商</span>
        <form action="">
          <svg-icon iconClass="fangdajing" class="icon"></svg-icon>
          <input type="text" placeholder="搜索商品" />
        </form>
      </div>
      <div class="logo-Tab">
        <van-tabs
          background="-webkit-linear-gradient(
          left,
          #f62d2d,
          #f62e2c,
          #f7462b,
          #f95f29,
          #f86929
        )"
          title-active-color="white"
          color="white"
          title-inactive-color="white"
          v-model="activeName"
          @click="onClick"
        >
          <van-tab title="首页" name="home"></van-tab>
          <van-tab title="每日新品" name="day"></van-tab>
          <van-tab title="热门推荐" name="hot"></van-tab>
          <van-tab title="家用电器" name="wiring"></van-tab>
          <van-tab title="日用文创" name="stationery"></van-tab>
        </van-tabs>
      </div>
    </header>
    <main>
      <component v-bind:is="active" />
    </main>
  </div>
</template>

<script>
import home from "./components/HomePage";
import day from "./components/DailyNew";
import hot from "./components/Hot";
import wiring from "./components/Wiring";
import stationery from "./components/Stationery";

export default {
  components: {
    home,
    day,
    hot,
    wiring,
    stationery,
  },
  data() {
    return {
      active: "home",
      activeName: "home",
    };
  },
  methods: {
    onClick(name) {
      this.active = name;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.home {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  header {
    width: 100%;
    height: px2rem(95);
    background: -webkit-linear-gradient(
      left,
      #f62d2d,
      #f62e2c,
      #f7462b,
      #f95f29,
      #f86929
    );
    .Logo {
      width: 100%;
      height: px2rem(48);
      display: flex;
      align-items: center;
      span {
        margin-left: 13px;
        font-size: 16px;
        color: rgb(250, 248, 248);
      }
      form {
        width: px2rem(254);
        height: px2rem(28);
        display: flex;
        align-items: center;
        margin-left: px2rem(15);
        background: #ffffff;
        border-radius: px2rem(30);
        .icon {
          font-size: px2rem(18);
          font-weight: bold;
          margin-left: px2rem(14);
        }
        input {
          width: 100%;
          height: 100%;
          font-size: px2rem(15);
          border: 0;
          outline: none;
          background: none;
          text-indent: px2rem(5);
          color: #bfbfbf;
        }
      }
    }
  }
  .logo-tab {
    width: 100%;
    height: px2rem(47);
    font-size: px2rem(18);
  }
  main {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
